<template>
  <div id="Grade_id">
    <form action="">
      <div class="fodiv">
        <span>班级名称 :</span>&nbsp;<input
          type="text"
          v-model="grade.gradename"
        />
      </div>
      <div class="fodiv">
        <span>班级人数 :</span>&nbsp;<input
          type="number"
          v-model="grade.gradebody"
        />
      </div>
      <div class="fodiv">
        <span>班主任 :</span>&nbsp;<input
          type="text"
          v-model="grade.gradeteacher"
        />
      </div>
      <div class="btn1" @click="add">提交</div>
    </form>
    <table border="1" cellspacing="0" cellpadding="0">
      <tr class="tr1">
        <td>
          全选 <input type="checkbox" @change="toggle" v-model="checked" />
        </td>
        <td>班级ID</td>
        <td>班级名称</td>
        <td>班级人数</td>
        <td>班主任</td>
        <td>操作</td>
      </tr>
      <tr v-for="(list, index) in grade_list" :key="index">
        <td>
          <input
            type="checkbox"
            v-model="list.checked"
            @change="toggleCheckd"
          />
        </td>
        <td>{{ index + 1 }}</td>
        <td>{{ list.gradename }}</td>
        <td>{{ list.gradebody }}人</td>
        <td>{{ list.gradeteacher }}</td>
        <td>
          <div
            @click="alter(index)"
            :class="{ chg: list.flag, chg2: !list.flag }"
          >
            {{ list.flag ? "保存" : "修改" }}
          </div>
          <div class="btn2" @click="del(index)">删除</div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false,
      grade: {
        gradename: "",
        gradebody: "",
        gradeteacher: "",
      },
      grade_list: [
        {
          gradename: "web0101",
          gradebody: "40",
          gradeteacher: "李华",
          flag: false,
        },
        {
          gradename: "web0102",
          gradebody: "70",
          gradeteacher: "张红",
          flag: false,
        },
        {
          gradename: "web0103",
          gradebody: "50",
          gradeteacher: "王项",
          flag: false,
        },
        {
          gradename: "web0104",
          gradebody: "20",
          gradeteacher: "刘畅",
          flag: false,
        },
      ],
    };
  },
  methods: {
    add() {
      if (this.grade.gradename.trim() === "") {
        return alert("班级名不能为空");
      }
      if (this.grade.gradebody.trim() === "") {
        return alert("班级人数不能为空");
      }
      if (this.grade.gradeteacher.trim() === "") {
        return alert("班主任不能为空");
      }
      let obj = {
        gradename: this.grade.gradename,
        gradebody: this.grade.gradebody,
        gradeteacher: this.grade.gradeteacher,
      };
      this.grade_list.push(obj);
      this.grade = {
        gradename: "",
        gradebody: "",
        gradeteacher: "",
      };
      console.log(this.grade);
    },
    del(index) {
      this.grade_list.splice(index, 1);
    },
    alter(i) {
      this.grade_list[i].flag = !this.grade_list[i].flag;
      // if (this.flag == true) {
      //   this.con = "保存";
      // } else if (this.flag == false) {
      //   this.con = "修改";
      // }
    },
    toggleCheckd() {
      var ckd = true;
      this.grade_list.forEach((list) => {
        if (!list.checked) {
          ckd = false;
        }
      });
      this.checked = ckd;
    },
    toggle() {
      this.grade_list.forEach((list) => {
        list.checked = this.checked;
      });
    },
  },
};
</script>

<style>
#Grade_id input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

#Grade_id input[type="number"] {
  -moz-appearance: textfield;
}

#Grade_id form {
  margin: 30px 0;
  width: 100%;
}

#Grade_id form .fodiv {
  width: 302px;
  display: inline-block;
  margin-left: 50px;
}

#Grade_id form .btn1 {
  width: 60px;
  height: 35.5px;
  color: #fff;
  line-height: 35.5px;
  text-align: center;
  border-radius: 10px;
  background-color: #3d4a5d;
  display: inline-block;
  cursor: pointer;
  margin-left: 20px;
}

#Grade_id form input {
  width: 200px;
  height: 30px;
  outline: none;
  padding-left: 20px;
}

#Grade_id table {
  margin-left: 50px;
}

#Grade_id table .tr1 {
  background-color: rgb(156, 156, 156);
}

#Grade_id td {
  padding: 10px 50px;
  text-align: center;
}

#Grade_id .btn2 {
  background-color: rgb(255, 68, 68);
  padding: 5px 10px;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
}

#Grade_id .chg {
  margin-right: 10px;
  background-color: rgb(41, 224, 71);
  padding: 5px 10px;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
}

#Grade_id .chg2 {
  margin-right: 10px;
  background-color: rgb(41, 68, 224);
  padding: 5px 10px;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
}
</style>